<template>
  <div>
    <slot name="text" :row="dialog">
      <!-- 默认内容 -->
      <el-button type="primary" @click="dialog.visible = true"
        >点击打开弹框</el-button
      >
    </slot>
    <el-dialog
      :close-on-press-escape="false"
      :append-to-body="true"
      :title="title"
      :before-close="handleClose"
      :close-on-click-modal="false"
      @close="close"
      :width="width"
      destroy-on-close
      v-model="dialog.visible"
    >
      <div :style="{ height: height }">
        <slot name="body" :row="dialog">
          <!-- 默认内容 -->
          弹框内部内容
        </slot>
      </div>
      <template #footer>
        <span class="dialog-footer">
            <slot name="footer" :row="dialog">
             <!-- 默认内容 -->
             <el-button type="primary" @click="dialog.visible = false">确认</el-button>
             <el-button type="primary" @click="dialog.visible = false">取消</el-button>
            </slot>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive } from "vue";
const props = defineProps({
    // 弹框头部标题
    title: {
        type: String,
        required:true
    },
    width: {
        type: String,
        default:'70%',
    },
    // 弹框高度
    height: {
        type: String,
        default:"",
      }
})

const emits = defineEmits(["close"])
const dialog = reactive({
  visible: false,
});

const close = () => {
    emits("close")
}

const handleClose = () => {
    dialog.visible = false
};

defineExpose({
    dialog,
})
</script>
<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>